@extends('layouts/contentNavbarLayout')

@section('title', 'Личный кабинет сотрудника')

@section('vendor-script')
  <script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>
  <script src="{{ mix('assets/libs/FullCalendar/dist/index.global.min.js') }}"></script>
  <script src="{{ mix('assets/libs/moments/moments.js') }}"></script>
@endsection

@section('content')
      <div class="card">
        <div class="card-header">
          <h5 class=""><i class='bx bx-calendar fs-3 text-primary'></i> График работы</h5>
        </div>
        <div class="card-body">
          <div id="calendar"></div>
        </div>
      </div>
@endsection

@section('page-script')
  <script>

    let eventList = [];

    @if(isset(Auth::user()->hrInfo->Отпуска ))
    @foreach (Auth::user()->hrInfo->Отпуска as $key => $value)
    @if($value['Активно'])
    createEventOtpusk('Отпуск', '{{$value['ДатаНачала']}}', '{{$value['ДатаОкончания']}}', eventList);
    @endif
    @endforeach
    @endif
    @if(isset($workShift))
    @foreach($workShift as $one)
    createWorkDay('{{$one['Дата']}}','{{$one['ДатаОкончания']}}', '{{json_encode($one['ТипРабочейСмены'])}}', eventList);
    @endforeach
    @endif

    $(function () {

      moment.updateLocale('en', {
        week: {
          dow: 1 // понедельник - первый день недели
        }
      });

      let calendarEl = document.getElementById('calendar');
      calendar = new FullCalendar.Calendar(calendarEl, {
        views: {
          month: {
            type: 'onemonth',
            duration: {months: 1}
          },
        },
        locale: 'ru',
        themeSystem: 'bootstrap5',
        firstDay: '1',
        multiMonthMaxColumns: 1,
        headerToolbar: {
          end: 'prev,today,next',
        },
        eventContent: function (info) {

          let start = moment(info.event.start).format('HH:mm');
          let end = moment(info.event.end).format('HH:mm');
          let durationFrom = '';
          let durationTo = '';
          let eatTime = '';
          if (start !== end) {
            durationFrom = '<div> с: ' + moment(info.event.start).format('HH:mm') + '</div>';
            durationTo = '<div> по: ' + moment(info.event.end).format('HH:mm') + '</div>';
            eatTime = '<div> Обед: ' + info.event.extendedProps.description['Перерыв'].substr(0, 5) + ' ч. </div>';
          }

          let title = '<div>' + info.event.title + '</div>';
          let content = '<div class="d-flex flex-column p-1">' + title + durationFrom + durationTo + eatTime + '</div>';
          return {html: content}
        },
        buttonText: {
          today: 'Сегодня',
          month: 'Месяц',
          week: 'Неделя',
          day: 'День',
          list: 'Список',
        },
        timeZone: 'local',
        displayEventTime: true,
        displayEventEnd: true,
        selectable: false,
        events: eventList,
        editable: false,
        eventStartEditable: false,
      });

      calendar.render();
    });

    function createEventOtpusk(eventName, dateStart, dateEnd, eventList) {
      eventList.push({
        title: eventName,
        start: dateStart,
        end: dateEnd,
        display: 'block',
        backgroundColor: '#afe872',
      });
    }

    function createWorkDay(dateStart, dateEnd, startWorkTime,  eventList){
      startWorkTime = startWorkTime.replaceAll('&quot;','"');
      startWorkTime = startWorkTime.replaceAll('\'','');
      eventList.push(
        {
          title: 'Рабочий день',
          display: 'block',
          start: dateStart,
          end: dateEnd,
          className: 'd-flex flex-column',
          backgroundColor: '#3788d8',
          description: JSON.parse(startWorkTime)
        }
      )
    }

  </script>
@endsection
